<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分类</title>
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.5.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.5.5.5/themes/icon.css">
    <script type="text/javascript" src="../jquery-easyui-1.5.5.5/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.5.5.5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
    <script src="../js/common.js"></script>
</head>

<body>
    <script>
        var id = null;
        var type;
    </script>
    <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:500px;height:300px;margin-right:600px;">
        <form id="ff" method="post" style="margin-top:10px">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="text" style="width:100%" data-options="label:'请输入类名:',required:true">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
    <div class="easyui-tabs" data-options="tabWidth:80,tabHeight:25" style="width:600px;height:auto">
        <div title="<span class='tt-inner'>新闻分类</span>" style="padding:10px">
            <div class="easyui-panel" style="padding:5px">
                <ul id="tt" class="easyui-tree" data-options="
                        url: `${ip}/cates/list/${1}`,
                        method: 'get',
                        animate: true,
                        onContextMenu: function(e,node){
                            id=node._id;
                            type=node.type
                            console.log(id);
                            e.preventDefault();
                            $(this).tree('select',node.target);
                            $('#mm').menu('show',{
                                left: e.pageX,
                                top: e.pageY
                            });
                        }
                    "></ul>
            </div>
            <div id="mm" class="easyui-menu" style="width:120px;">
                <div onclick="dakai()" data-options="iconCls:'icon-add'">添加分类</div>
                <!-- <div onclick="append()" data-options="iconCls:'icon-add'">添加分类</div> -->
                <div onclick="removeit()" data-options="iconCls:'icon-remove'">删除分类</div>
                <div class="menu-sep"></div>
                <div onclick="expand()">打开菜单</div>
                <div onclick="collapse()">关闭菜单</div>
            </div>
        </div>
        <div title="<span class='tt-inner'>用户分类</span>" style="padding:10px">
            <div class="easyui-panel" style="padding:5px">
                    <ul id="tt" class="easyui-tree" data-options="
                            url: `${ip}/cates/list/${1}`,
                            method: 'get',
                            animate: true,
                            onContextMenu: function(e,node){
                                id=node._id;
                                type=node.type
                                console.log(id);
                                e.preventDefault();
                                $(this).tree('select',node.target);
                                $('#mm').menu('show',{
                                    left: e.pageX,
                                    top: e.pageY
                                });
                            }
                        "></ul>
                </div>

        </div>
        <div title="<span class='tt-inner'>产品分类</span>" style="padding:10px">

            <div class="easyui-panel" style="padding:5px">
                <ul id="tt" class="easyui-tree" data-options="
                        url: `${ip}/cates/list/${1}`,
                        method: 'get',
                        animate: true,
                        onContextMenu: function(e,node){
                            id=node._id;
                            type=node.type
                            console.log(id);
                            e.preventDefault();
                            $(this).tree('select',node.target);
                            $('#mm').menu('show',{
                                left: e.pageX,
                                top: e.pageY
                            });
                        }
                    "></ul>
            </div>
        </div>
        </div>
    </div>
    <style scoped="scoped">
        *{
            margin: 0;
            padding: 0;
        }
        .tt-inner {
            display: inline-block;
            line-height: 12px;
            padding-top: 5px;
        }
        
        .tt-inner img {
            border: 0;
        }
    </style>
</body>

</html>



<script type="text/javascript">
    function append() {
        console.log(111);
        console.log($('#ff').serializeJSON());
        var t = $('#tt');
        var node = t.tree('getSelected');
        t.tree('append', {
            parent: (node ? node.target : null),
            data: [{
                text: $('.easyui-textbox').val()

            }]
        });
    }

    function dakai() {
        $('#dlg').dialog('open');
        $('#as').val(id);
    }

    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function() {

                append();
                $.ajax({
                    url: `${ip}/cates/data`,
                    type: 'post',
                    data: Object.assign($('#ff').serializeJSON(), {
                        parentId: id,
                        type: type
                    })
                }).then(res => {
                    $('#dlg').dialog('close');
                    $('#dg').datagrid('reload');
                })

            }

        });
    }

    function removeit() {
        var node = $('#tt').tree('getSelected');
        $.ajax({
            url: `${ip}/cates/data/${node._id}`,
            type: 'delete'
        }).then(res => {
            $('#tt').tree('remove', node.target);
        });
        $.ajax({
            type: "post",
            url: `${ip}/news/data`,
            data: {
                nid:node_id,
            },
          
        });
    }



    function collapse() {
        var node = $('#tt').tree('getSelected');
        $('#tt').tree('collapse', node.target);
    }

    function expand() {
        var node = $('#tt').tree('getSelected');
        $('#tt').tree('expand', node.target);
    }
</script>